<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.box {
				transform-style: preserve-3d;
				width: 200px;
				height: 300px;
				/*background-color: black;*/
				margin: 300px auto 0;
				position: relative;
				transform: rotateX(45deg);
				/*animation: roll 1s linear 0s infinite;*/

			}

			.box:hover {
				animation: roll 1s linear 0s infinite;
			}

			.box>div {
				width: 200px;
				height: 300px;
				position: absolute;
			}

			.box>.a1 {
				background-color: red;
				transform: translateZ(300px);
			}


			.box>.a2 {
				background-color: blue;
				transform: rotateY(60deg) translateZ(300px);
			}

			.box>.a3 {
				background-color: yellow;
				transform: rotateY(120deg) translateZ(300px); 
			}

			.box>.a4 {
				background-color: green;
				transform: rotateY(180deg) translateZ(300px);
			}

			.box>.a5 {
				background-color: cyan;
				transform: rotateY(240deg) translateZ(300px);
			}

			.box>.a6 {
				background-color: purple;
				transform: rotateY(300deg) translateZ(300px);
			}




			@keyframes roll {
				from {
					/* transform, left, top, bottom, right需要给初始值 */
					transform: rotateX(45deg) rotateY(0deg);
				}
				to {
					transform: rotateX(45deg) rotateY(360deg);
				}
			}

		</style>
	</head>
	<body>

		<div class="box">
			<div class="a1"></div>
			<div class="a2"></div>
			<div class="a3"></div>
			<div class="a4"></div>
			<div class="a5"></div>
			<div class="a6"></div>
		</div>
		
	</body>
</html>